<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title> tabs with auto play function </title>
<meta name="robots" content="all" />
<style type="text/css" media="screen">
<!--
body,dl,dt,dd{font:12px/1.5em arial;padding:0;margin:0;color:#666;}
body{margin:50px;}
img{border:0;}
a:link{color:#369;text-decoration: none; }
a:hover{color:#c83;}
.tab{width:210px;border:1px solid #ccc;height: 140px;position: relative; }
.tab dt{float:left;width:70px;padding:3px 0 2px;background: #eee;text-align: center;color:#666;cursor:pointer;}
.tab dt.on{background: #fff;color:#c83;}
.tab dd{display:none;position: absolute;left:0;top:25px;padding:10px;}
.tab dd.on{display:block;}
.tab dd img{height: 90px;width: 200px;}
.tab dd h2{margin:7px 3px 0;font:bold 1.2em arial;color:#999;}
.tab dd p{margin:3px;text-indent: 2em;}
-->
</style>
<script type="text/javascript">
<!--
window.onload = function(){
	timertab("tab_01",1,1,1);
}
function timertab(t,a,lp,st){ //t为要应用此函数的tab的id，a初始化时显示的项目的顺序数,lp只轮换一次，st点击以后是否继续
    this.obj = document.getElementById(t).getElementsByTagName("dt");//导航
    this.eles = document.getElementById(t).getElementsByTagName("dd");//内容
    this.start = a-1;//初始项目
    this.speed = 2000;//切换间隔
    this.setid = null;//定时器

    var loop = function(){ //自动切换
        for(var i=0,j=obj.length;i<j;i++){
            obj[i].className = "";
            eles[i].className = "";
        }
        obj[start].className = "on";
        eles[start].className = "on";
        setid=setTimeout(loop,speed);
        start++;
        if(start==obj.length){
            start=0;
            if(lp==0){clearTimeout(setid);}//只循环一次
        }
    };loop();

    var clik = function(){ //点击
        for(var i=0;i<obj.length;i++){
            obj[i].onclick = function(){
                clearTimeout(setid);//停止原来的自动切换
                var inb = this.id.substr(this.id.indexOf("#")+6,1);//这里的数字6为dt的id中数字序号出现的位置数
                for(var i=0,j=obj.length;i<j;i++){//重新初始化
                    obj[i].className = "";
                    eles[i].className = "";
                }
                this.className = "on";//显示点击项
                eles[inb-1].className = "on";

                if(st===1){start=inb-1;loop();}//从这里开始继续循环（可以根据要求选择是否去掉这部分）

                return false //取消<a href="#tabs_01">默认事件
            }
        }
    };clik();
}
//-->
</script>
</head>

<body>
<p>this is a automatic play tabs navigation, and can set the parameter in function: 
<br />1) start with a specific tab<br />2) not automatic<br />3) loop once<br />4) after click stop loop</p>
<dl id="tab_01" class="tab">
	<dt id="tab_01">Html</dt>
	<dd id="tabs_01">
		<h2>Structure</h2>
		<p>XHTML、XML</p>
	</dd>

	<dt id="tab_02">Css</dt>
	<dd id="tabs_02">
		<h2>Representation</h2>
		<p>CSS</p>
	</dd>

	<dt id="tab_03">Javascript</dt>
	<dd id="tabs_03">
		<h2>Behavior</h2>
		<p>DOM、JavaScript</p>
	</dd>
</dl>

</body>
</html>